* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	list-style: none;
}

.container {
	position: absolute;
	overflow: hidden;
	left: 50%;
	top: 50%;
	width: 1200px;
	height: 300px;
	transform: translate(-50%, -50%);
	&:hover {
		cursor: pointer;
	}
	.slider {
		width: 400%;
		height: 85%;
		margin: 0;
		background: #fff;
		li {
			display: flex;
			float: left;
			width: 1200px;
			height: 100%;
			div {
				flex: 1;
				text-align: center;
				padding: 10px;
				.icon {
					position: relative;
					left: 50%;
					transform: translate(-50%);
					display: flex;
					justify-content: center;
					align-items: center;
					width: 80px;
					height: 80px;
					border-radius: 50%;
					background-color: #ecf6ff;
				}
				svg {
					position: relative;
					width: 40px;
					height: 40px;
					color: #6ab04c;
				}
				h3 {
					margin: 20px 0;
				}
			}
		}
	}
}
.labels {
	position: absolute;
	top: 90%;
	left: 50%;
	transform: translate(-50%);
	span {
		display: inline-block;
		width: 14px;
		height: 14px;
		background: #808080;
		border-radius: 50%;
		transition: 0.5s;
		margin: 0 10px;
	}
	span.active {
		width: 36px;
		border-radius: 16px;
		background: #6ab04c;
	}
}
.arrow {
	position: absolute;
	display: flex;
	justify-content: space-between;
	align-items: center;
	top: 37.5%;
	width: 100%;
	padding: 0 30px;
	transform: translate(0, -50%);
	span {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 9;
		opacity: 0;
		transition: all 0.5s;
		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: -1;
			transform: translate(-50%, -50%);
			width: 45px;
			height: 45px;
			border-radius: 50%;
			color: #fff;
			background: skyblue;
		}
	}
}
.arrow_right,
.arrow_left {
	svg {
		display: inline-block;
		width: 45px;
		height: 45px;
	}
}

.container:hover .arrow span {
	opacity: 1;
}
